<!doctype html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Jia·Wa - login</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
    
     <!-- CSS 
    ========================= -->
    <!--bootstrap min css-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!--owl carousel min css-->
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <!--slick min css-->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!--magnific popup min css-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!--font awesome css-->
    <link rel="stylesheet" href="assets/css/font.awesome.css">
    <!--ionicons css-->
    <link rel="stylesheet" href="assets/css/ionicons.min.css">
    <!--simple line icons css-->
    <link rel="stylesheet" href="assets/css/simple-line-icons.css">
    <!--animate css-->
    <link rel="stylesheet" href="assets/css/animate.css">
    <!--jquery ui min css-->
    <link rel="stylesheet" href="assets/css/jquery-ui.min.css">
    <!--slinky menu css-->
    <link rel="stylesheet" href="assets/css/slinky.menu.css">
    <!--plugins css-->
    <link rel="stylesheet" href="assets/css/plugins.css">
    
    <!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
    
    <!--modernizr min js here-->
    <script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
    <!--jquery min js-->
    <script src="assets/js/vendor/jquery-3.4.1.min.js"></script>

</head>

<body>

   <!--header area start-->
    
    <!--offcanvas menu area start-->
    <div class="off_canvars_overlay">
                
    </div>
   <!--头部基本信息 顶部基本信息、菜单栏、购物车标签等。。。begin-->
   <header>
       <div id="header">
       </div>
       <script>
           $("#header").load("header.jsp")
       </script>
   </header>
   <!--头部基本信息 顶部基本信息、菜单栏、购物车标签等。。。end-->

    <!--breadcrumbs area start-->
    <div class="breadcrumbs_area">
        <div class="container">   
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb_content">
                        <ul>
                            <li><a href="index.jsp">首页</a></li>
                            <li>登录</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>         
    </div>
    <!--breadcrumbs area end-->
    
    <!-- customer login start -->
    <div class="customer_login">
        <div class="container">
            <div class="row">
               <!--登录 start-->
                <div class="col-lg-6 col-md-6">
                    <div class="account_form">
                        <h2>登录</h2>
                        <form action="webDLUser">
                            <p>   
                                <label>用户名 <span>*</span></label>
                                <input placeholder="请输入用户名.." type="text" name="uid">
                             </p>
                             <p>   
                                <label>密码 <span>*</span></label>
                                <input placeholder="请输入密码.." type="password" name="pwd">
                             </p>   
                            <div class="login_submit">
                               <a href="#">是否记住你的密码?</a>
                                <label for="remember">
                                    <input id="remember" type="checkbox">
                                    记住我
                                </label>
                                <button type="submit" name="login">登录</button>
                                
                            </div>

                        </form>
                     </div>    
                </div>
                <!--登录 start-->

                <!--注册 start-->
                <div class="col-lg-6 col-md-6">
                    <div class="account_form register">
                        <h2>注册</h2>
                        <form action="registerUseraction" method="get">
                            <%-- id值为中文首字母小写 --%>
                            <p>
                                <label>用户名<span>*</span></label>
                                <input placeholder="请输入用户名.." id="zn" type="text" name="uid">
                                <span id="zuid"></span>
                             </p>
                             <p>
                                <label>密码 <span>*</span></label>
                                <input placeholder="请输入密码" id="zp" type="password" name="pwd">
                                 <span id="zpwd"></span>
                             </p>
                            <div class="zhuce">
                                <button type="submit" >注册</button>
                                <span name="zcid"></span>
                            </div>
                        </form>
                    </div>    
                </div>
                <!--register area end-->
            </div>
        </div>    
    </div>
    <!-- customer login end -->

   <%--页面底部--%>
   <div id="tail">

   </div>
   <script>
       $("#tail").load("tail.jsp");
   </script>
   
 
<!-- JS
============================================ -->

<!--popper min js-->
<script src="assets/js/popper.js"></script>
<!--bootstrap min js-->
<script src="assets/js/bootstrap.min.js"></script>
<!--owl carousel min js-->
<script src="assets/js/owl.carousel.min.js"></script>
<!--slick min js-->
<script src="assets/js/slick.min.js"></script>
<!--magnific popup min js-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--counterup min js-->
<script src="assets/js/jquery.counterup.min.js"></script>
<!--jquery countdown min js-->
<script src="assets/js/jquery.countdown.js"></script>
<!--jquery ui min js-->
<script src="assets/js/jquery.ui.js"></script>
<!--jquery elevatezoom min js-->
<script src="assets/js/jquery.elevatezoom.js"></script>
<!--isotope packaged min js-->
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--slinky menu js-->
<script src="assets/js/slinky.menu.js"></script>
<!-- Plugins JS -->
<script src="assets/js/plugins.js"></script>

<!-- Main JS -->
<script src="assets/js/main.js"></script>

<script>
    <%--$(function () {--%>
    <%--    $("#zn").hover(function(){--%>
    <%--        $("#zuid").html("请输入用户名");--%>
    <%--    },function(){--%>
    <%--            $.ajax({--%>
    <%--                url:"/registerUser?uid=${uid}",--%>
    <%--                type:"get",--%>
    <%--                data:{"name":$("input[name='uid']").val()},--%>
    <%--                success:function (data) {--%>
    <%--                    $("#zuid").html(data);--%>
    <%--                },--%>
    <%--                async:true--%>
    <%--            });--%>
    <%--    })--%>
    <%--})--%>

</script>
   <script>
       $(function () {
           <!-- 用户名局部刷新 -->
           $("#zn").blur(function () {
               $.ajax({
                   url: "/userregisteruid",
                   type: "get",
                   data: {"uid": $(this).val()},
                   success: function (data) {
                       $("#zuid").text(data);
                       // alert(data);
                   }
               })
           })
        $("#zhuce").click(function () {
            $.ajax({
                url: "/registerUseraction",
                type: "get",
                data: {"zcid": $(this).val()},
                success: function (data) {
                    alert(data);
                }
            })
        })
       })
   </script>

   <script>         <!-- 密码局部刷新 -->
       $("#zp").blur(function () {
           if ($(this).val().length>15 || $(this).val().length<6) {
               $("#zpwd").text("包含非法字符或长度不符合要求，请输入6-15长度的密码").css("color","red");
           }else{
               $("#zpwd").text("密码可以使用").css("color","#0DB6C8");
           }
       })
   </script>



</body>

</html>